<template>
    <!-- 登录模块: 帐号和密码以及拼图验证码 -->
    <div class="login-bg">
        <div class="login">
            <div class="login-title">视频客服审核平台</div>
            <div class="login-form">
                <el-form :model="loginForm" style="max-width: 400px;" ref="ruleFormRef" :rules="loginRules">
                    <el-form-item label="工号" prop="account">
                        <el-input v-model="loginForm.account" placeholder="请输入工号" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password" style="padding-top: 10px;">
                        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" />
                    </el-form-item>
                    <el-form-item style="display: inline-block; margin-top: 10px;">
                        <el-button type="primary" @click="handleLogin(ruleFormRef)" v-if="!isLogin">登&nbsp;录</el-button>
                        <el-button type="primary" v-else loading>登&nbsp;录&nbsp;中</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { login } from '../api/member'
import router from '../router'
import { setToken, setMemberId, setMemberNum } from '../utils/cookieUtil'

interface LoginForm {
    account: string
    password: string
}

const ruleFormRef = ref<FormInstance>()

const loginForm = reactive<LoginForm>({
    account: '',
    password: ''
})

const loginRules = reactive<FormRules<LoginForm>>({
    account: [
        {
            required: true,
            message: '工号不能为空',
            trigger: 'blur'
        }
    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
        }
    ]
})

const isLogin = ref(false)

const handleLogin = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, _fields) => {
        if (valid) {
            const { account, password } = loginForm
            login(account, password).then((res) => {
                ElMessage.success('登录成功')
                setToken(res.data.token)
                setMemberId(res.data.memberId)
                setMemberNum(res.data.memberNum)
                router.push('/')
            })

        } else {
            ElMessage({
                message: '请完善信息',
                type: 'error'
            })
        }
    })
}


</script>

<style scoped>
.login-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: #F3F3F3;
}

.login {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 500px;
    height: 280px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 0 5px 1px #999;
}

.login-title {
    margin: 20px 0 20px 0;
    font-weight: bold;
    font-size: 25px;
    cursor: default;
}

.login-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-top: 10px;
}

.login-form input {
    width: 250px;
}

.login-form button {
    width: 270px;
    font-size: 16px;
    height: 36px;
}
</style>